import { MantineProvider } from "@mantine/core";
import "@mantine/core/styles.css";
import "@mantine/dates/styles.css";
import "@mantine/dropzone/styles.css";
import { useLocalStorage } from "@mantine/hooks";
import { Notifications } from "@mantine/notifications";
import "@mantine/notifications/styles.css";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import RelativeTime from "dayjs/plugin/relativeTime";
import themes from "./themes";

import { DatesProvider } from "@mantine/dates";

import { RouterProvider } from "react-router-dom";

import { ModalsProvider } from "@mantine/modals";
import APIUtilsProvider from "./components/APIUtilsProvider";
import router from "./router";

dayjs.extend(RelativeTime);
dayjs.locale("zh-cn");

function App() {
  const [themeName, setThemeName] = useLocalStorage({
    key: "theme-name",
    defaultValue: "earl",
  });

  return (
    <MantineProvider theme={themes[themeName]} withCssVariables>
      <DatesProvider
        settings={{
          locale: "zh-cn",
          firstDayOfWeek: 1,
          weekendDays: [0, 6],
          timezone: "Asia/Shanghai",
        }}
      >
        <Notifications position="top-center" />
        <APIUtilsProvider>
          <ModalsProvider>
            <RouterProvider router={router} />
          </ModalsProvider>
        </APIUtilsProvider>
      </DatesProvider>
    </MantineProvider>
  );
}

export default App;
